<script>
import {canLearnSkill, getMyPokeList, releasePoke} from "@/axios/request/index.js";

const groupId = localStorage.getItem("groupId")
const userId = localStorage.getItem("userId")

export default {
  data() {
    return {
      pokeList: [],
      pokeListQO: {
        pokeName: "",
        attribute: "",
        isReleaseList: [],
      },
      isReleaseOption: [
        {
          label: "否",
          value: 0,
        },
        {
          label: "是",
          value: 1,
        },
      ],
      pokeCanLearnSkillList: [],
      showPokeCanLearnSkillDialog: false,
    }
  },
  methods: {
    getPokeList() {
      getMyPokeList(groupId, userId, this.pokeListQO).then((result) => {
        this.pokeList = result
      })
    },
    releasePoke(pokeId, isRelease) {
      releasePoke(groupId, userId, pokeId, isRelease).then((result) => {
        this.getPokeList()
      })
    },
    getPokeCanLearnSkill(attribute1, attribute2) {
      canLearnSkill(attribute1, attribute2).then((result) => {
        this.pokeCanLearnSkillList = result
        this.showPokeCanLearnSkillDialog = true
      })
    }
  },
}
</script>

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right title">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size:15px;">首页</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">我的poke</el-breadcrumb-item>
      <el-breadcrumb-item style="font-size:15px;">poke列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="query-button">
    <el-row justify="space-evenly">
      <el-col :span="6">
        poke名称：
        <el-input v-model="this.pokeListQO.pokeName" style="width: 200px" placeholder="请输入poke名称"></el-input>
      </el-col>
      <el-col :span="6">
        属性：
        <el-input v-model="this.pokeListQO.attribute" style="width: 200px" placeholder="请输入属性"></el-input>
      </el-col>
      <el-col :span="6">
        是否放生：
        <el-select v-model="this.pokeListQO.isReleaseList" style="width: 200px" multiple placeholder="请现在是否放生">
          <el-option v-for="item in this.isReleaseOption"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button @click="this.getPokeList()">查询</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="table-div">
    <el-scrollbar>
      <el-table :data="this.pokeList" border height="650">
        <el-table-column label="图片">
          <template #default="scope">
            <el-image :src="'/src/' + scope.row.localUrl" style="width: 100px;height: 100px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="群号" prop="groupId"></el-table-column>
        <el-table-column label="QQ号" prop="userId"></el-table-column>
        <el-table-column label="poke名称" prop="pokeName"></el-table-column>
        <el-table-column label="属性">
          <template #default="scope">
            <el-tag>{{ scope.row.attribute1 }}</el-tag>
            <el-tag v-if="scope.row.attribute2 != null" style="margin-left: 5px">{{ scope.row.attribute2 }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="招式">
          <template #default="scope">
            <div v-for="pokeSkill in scope.row.pokeSkillVOList" style="margin: 2px">
              <el-tooltip :content="pokeSkill.attribute + ' ' + pokeSkill.classification" placement="top">
                <el-tag>{{ pokeSkill.name }}</el-tag>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="属性值">
          <template #default="scope">
            <el-tag>
              <el-text type="success">生命值：</el-text>
              {{ scope.row.hp }}
            </el-tag>
            <br></br>
            <el-tag style="margin-top: 5px">
              <el-text type="danger">攻击力：</el-text>
              {{ scope.row.aggressivity }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-row>
              <el-col v-if="scope.row.isRelease === 0">
                <el-button @click="this.releasePoke(scope.row.pokeId, 1)" size="small">放生</el-button>
              </el-col>
              <el-col v-if="scope.row.isRelease === 1">
                <el-tooltip content="如果召回的poke没有招式的话，召回的时候会学习招式" placement="top">
                  <el-button @click="this.releasePoke(scope.row.pokeId, 0)" size="small">召回</el-button>
                </el-tooltip>
              </el-col>
              <el-col>
                <el-button @click="this.getPokeCanLearnSkill(scope.row.attribute1, scope.row.attribute2)" size="small">
                  可学习招式
                </el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </div>
  <div v-if="this.showPokeCanLearnSkillDialog">
    <el-dialog v-model="this.showPokeCanLearnSkillDialog" title="可学习招式列表" width="500">
      <el-scrollbar>
        <el-table :data="this.pokeCanLearnSkillList" border height="650">
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="属性" prop="attribute"></el-table-column>
          <el-table-column label="分类" prop="classification"></el-table-column>
        </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<style scoped>
.query-button {
  margin-top: 5px;
  text-align: center;
  background-color: #f6f5f5;
  padding: 5px;
}

.table-div {
  margin-top: 5px;
}
</style>